<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" charset="UTF-8">
    <style type="text/css">
        #div1, #div2
        {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">

        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            ev.dataTransfer.setData("current",ev.target.id);
            ev.dataTransfer.setData("from",ev.target.parentElement.id);
            var pdiv = findParentDiv(ev.target);


        }
        function findParentDiv(node){
            var pdiv = null;
            pdiv = node;
            while(pdiv.nodeName.toLowerCase() != "div"){
                pdiv = pdiv.parentElement;
            }
            return pdiv;
        }
        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("current");
            var from = ev.dataTransfer.getData("from");
            var pdiv=findParentDiv(ev.target);
            var pi = pdiv.getAttribute('curImg');

            if(pdiv.getAttribute("id").match("ccimg")){
                if(from.match("ccimg") || pdiv.getElementsByTagName("img").length!=0) {
                    return;
                }
                document.getElementById(from).removeAttribute("curImg");
            }
            else{
                pdiv.setAttribute('curImg',data);
            }

            if(pi!=undefined && pi!="") {
                if (from.match("ccimg")) {
                    document.getElementById("cc" + pi).appendChild(document.getElementById(pi));
                    document.getElementById("i" + pi).setAttribute("value", "0");
                } else {
                    document.getElementById(from).setAttribute("curImg", pi);
                    document.getElementById(from).appendChild(document.getElementById(pi));
                    document.getElementById("i" + pi).setAttribute("value", from.substring(4, from.length));
                }
            }
            pdiv.appendChild(document.getElementById(data));
            if(pdiv.getAttribute("id").match("ccimg")){
                document.getElementById("i"+data).setAttribute("value","0");
            }
            else{
                document.getElementById("i"+data).setAttribute("value",pdiv.getAttribute("id").substring(4,pdiv.getAttribute("id").length));
            }
            if(document.getElementById(from).getElementsByTagName("img").length==0){
                document.getElementById(from).removeAttribute("curImg");
            }
        }
        function imageShow(event){
            $('#modalImage').modal('show');
        };
        function imageClose(){
            $('#modalImage').modal('hide');
        };
    </script>
</head>
<style>
    .imgbox-large{
        height: 10em;
        border: 1px black solid;
    }
    .imgbox-small{
        height: 5em;
        border: 1px black solid;
    }
</style>
<body>
<div class="container" style="margin-top:1em;">
    <div class="row">
        <div id="cimg1" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large"  ></div>
        <div id="cimg2" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>
        <div id="cimg4" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>
        <div id="cimg8" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>
        <div id="cimg10" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>
    </div>
    <div class="row">
        <div id="cimg3" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 col-sm-offset-2 imgbox-large" ></div>
        <div id="cimg5" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>
        <div id="cimg9" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 imgbox-large" ></div>

    </div>
    <div class="row">
        <div  id="cimg6" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 col-sm-offset-4 imgbox-large" ></div>
    </div>
    <div class="row">
        <div id="cimg7" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-2 col-sm-offset-4 imgbox-large" ></div>
    </div>
    <div class="row" style="margin-top: 2em;">
        <div id="ccimg1" onclick="imageShow(event)"  ondrop="drop(event)" ondragover="allowDrop(event)"  class="col-sm-1 imgbox-small" style="height:5em; ">
            <img  id="img1"  draggable="true" ondragstart="drag(event)"   style="width:100%; max-height: 100%;" src="/img/54fe9abebc78e7.45670126b6352eb9894bc559aee4971f053638d7.jpg">
        </div>
        <div id="ccimg2"  ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img2"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9abed6e806.901171240e0b94731dedde9fd325d4b09cff6a49.jpg">
        </div>
        <div id="ccimg3" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img3"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9abf0aa052.48433957c210903e680b9581bec17b995ab38919.jpg">
        </div>
        <div id="ccimg4" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img4"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9abf20f4b1.907754163420cd250f980edbea065d102bb55473.jpg">
        </div>
        <div  id="ccimg5" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img5"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9e855e51f3.10040232811ba796d3af6d37e87cd491066686cd.jpg">
        </div>
        <div  id="ccimg6" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img6"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9e85960fa0.1523394405a89f95afe33ba51c644f22e5d985ce.jpg">
        </div>
        <div  id="ccimg7" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img7"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9e854004b4.34935793c007b8105a0eae01afa6aa7ad5f66fbe.jpg">
        </div>
        <div  id="ccimg8" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img8"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/54fe9e85787121.316745933e971a21e5b0edd09eae4331404e1556.jpg">
        </div>
        <div id="ccimg9" ondrop="drop(event)" ondragover="allowDrop(event)" class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img9"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/55010b170f2ff4.67954101148186595c34ac869c9b2982987e1357.jpg">
        </div>
        <div id="ccimg10" ondrop="drop(event)" ondragover="allowDrop(event)"  class="col-sm-1 imgbox-small" style="height:5em; ">
            <img id="img10"  draggable="true" ondragstart="drag(event)"  style="width:100%; max-height: 100%;" src="/img/55010b609fb454.48550630513316ff9d9c1813d4bbe9fb68ad6e32.jpg">
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" style="overflow-x: auto !important;" id="modalImage" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true"  >
    <div id="modal" class="modal-dialog" style="margin-left:0em;width:0em;" >
        <img id="imageShowImg" onload="$('#modal').modal().css({'margin-left':(document.body.clientWidth
-this.width)<0?0:(document.body.clientWidth
-this.width)/2});" ng-src="{{component.modalImage.url}}" ng-click="component.modalImage.close();">
    </div><!-- /.modal -->
</div>
<form action="/api/survey/confirm" method="post">
    <input id="iimg1" type="hidden" name="cimg1" value="0">
    <input id="iimg2" type="hidden" name="cimg2" value="0">
    <input id="iimg3" type="hidden" name="cimg3" value="0">
    <input id="iimg4" type="hidden" name="cimg4" value="0">
    <input id="iimg5" type="hidden" name="cimg5" value="0">
    <input id="iimg6" type="hidden" name="cimg6" value="0">
    <input id="iimg7" type="hidden" name="cimg7" value="0">
    <input id="iimg8" type="hidden" name="cimg8" value="0">
    <input id="iimg9" type="hidden" name="cimg9" value="0">
    <input id="iimg10" type="hidden" name="cimg10" value="0">
</form>
</body>
</html>
